<template>
  <div class="clearfix login">
    <div class="left pr">
      <router-link to="/login" class="logo_login"></router-link>
      <div class="content_login">
        <div class="top clearfix">
          <span
            ><router-link to="/forgetpas" class="emile_reg active"
              >手机号找回密码</router-link
            ></span
          >/
          <span
            ><router-link to="/forgetemailepas" class="emile_reg"
              >邮箱找回密码</router-link
            ></span
          >
          <span></span>
        </div>
        <div class="text">通过手机号快速找回密码</div>
        <div class="bot">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <div class="input_select input clearfix">
              <select name id>
                 <option value="+86">+86</option>
                <option value="+852">+852</option>
                <option value="+866">+866</option>
              </select>
              <el-form-item prop="mobile">
                <el-input
                  v-model="ruleForm.mobile"
                  placeholder="手机号"
                  class="sjh_padding sjh_sjh padding_left_27"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input pr clearfix yzm_form">
              <el-form-item class="w70" prop="yzmnum">
                <el-input
                  v-model="ruleForm.yzmnum"
                  placeholder="验证码"
                  class="yzm_padding"
                ></el-input>
              </el-form-item>
              <el-button class="yzm pr padding_yam_0">
                <span v-if="sendMsgDisabled">{{ time + "秒后获取" }}</span>
                <span v-if="!sendMsgDisabled" @click="sendMsg()"
                  >获取验证码</span
                >
              </el-button>
            </div>
            <div class="input input2 pr">
              <el-form-item prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  placeholder="登录密码 6-16位数字+字母"
                  class="mimama"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input input2 mimama pr">
              <el-form-item prop="newpassword">
                <el-input
                  type="password"
                  v-model="ruleForm.newpassword"
                  autocomplete="off"
                  placeholder="确认密码 6-16位数字+字母"
                  class="mimama"
                ></el-input>
              </el-form-item>
            </div>

            <el-button class="ta" @click="submitForm">确认</el-button>
            <router-link to="/login" class="zhmmdl zmdll" >账户密码登录></router-link>
          </el-form>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="img"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: [],
      rules: {
        mobile: [
          { required: true, message: "请输入您的手机号", trigger: "blur" },
          { min: 7, max: 11, message: "请输入正确的手机号", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "请输入6-16位,格式为数字+字母",
            trigger: "blur",
          },
        ],
        newpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "请输入6-16位,格式为数字+字母",
            trigger: "blur",
          },
        ],
        yzmnum: [
          { required: true, message: "请输入您的验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请检查您的验证码是否正确",
            trigger: "blur",
          },
        ],
      },
      time: 60, // 发送验证码倒计时
      sendMsgDisabled: false,
    };
  },
  methods: {
    submitForm() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm);
            var passwordreg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
            if (!passwordreg.test(this.ruleForm.pass)) {
              //console.log(1223);
              this.$message.error("密码必须由数字、字母组合,请输入6-16位");
              return false;
            }
            if (this.ruleForm.pass !== this.ruleForm.newpassword) {
              this.$message.error("两次输入密码不一致!");
              return false;
            }

            if (!passwordreg.test(this.ruleForm.newpassword)) {
              this.$message.error("密码必须由数字、字母组合,请输入6-16位");
              return false;
            }

            //定义一个json示例
            //console.log(333);
            var jsons = {
              type: "mobile",
              mobile: this.ruleForm.mobile,
              newpassword: this.ruleForm.newpassword,
              captcha: this.ruleForm.yzmnum,
            };

            var that = this;
            //在需要的事件中直接使用
            this.$axios
              .post(this.$api + "/api/user/resetpwd", jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  //console.log(res.data.data);
                  // 登录成功
                  that.$message({
                    message: "重置密码成功",
                    type: "success",
                  });
                  // 缓存token
                  window.localStorage.setItem(
                    "token",
                    res.data.data.userinfo.token
                  );
                  window.localStorage.setItem(
                    "userid",
                    res.data.data.userinfo.user_id
                  );

                  // 跳转主页面
                  that.$router.push("/login");
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
              });

            //window.open("/#/index", "_self");
          } else {
            //console.log("error submit!!");
            return false;
          }
        });
      });
    },
    sendMsg() {
      var that = this;

      if (!this.ruleForm.mobile) {
        this.$message.error("请输入您的手机号");
        return false;
      }

      var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!reg.test(this.ruleForm.mobile)) {
        this.$message.error("请输入正确的手机号");
        return false;
      }

      that.sendMsgDisabled = true;

      let interval = window.setInterval(function () {
        if (that.time-- <= 0) {
          that.time = 60;
          that.sendMsgDisabled = false;
          window.clearInterval(interval);
        }
      }, 1000);

      var jsons = {
        mobile: this.ruleForm.mobile,
        event: "resetpwd",
      };

      this.$axios
        .post(this.$api + "/api/sms/send", jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            //that.time = 60;
            //that.sendMsgDisabled = false;
            //window.clearInterval(interval);
            that.$message.success("发送成功");
          } else {
            that.$message.error(res.data.msg);
            that.time = 60;
            that.sendMsgDisabled = false;
            window.clearInterval(interval);
          }
        })
        .catch((Error) => {
          //console.log(Error);
        });
    },
  },
};
</script>

<style scoped>

.zmdll {
    font-size: .875rem;
    line-height: 1.875rem;
    margin-top: 1.25rem;
    text-align: right;
    display: block;
}
.yzm_padding,
.mimama {
  font-size: 0.75rem;
}
 .emile_reg:hover,.emile_reg.active{
  color: #4285f4 !important;
}
.emile_reg {
  color: #000;
}
.padding_yam_0.yzm {
  padding: 0;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.text {
  font-size: 0.875rem;
  line-height: 1.875rem;
  color: #484949;
  margin-bottom: 0.625rem;
}
.login {
  width: 100vw;
  height: 100vh;
}
.login .left {
  width: 50%;
  float: left;
  padding: 3.125rem 3.75rem;
  height: 100vh;
}
.login .right {
  width: 50%;
  float: right;
}
.input {
  margin-bottom: 1.25rem;
}
.login .right .img {
  background: url(../../img/60.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.login .left .logo_login {
  background: url(../../img/logp.svg) no-repeat;
  width: 140px;
  height: 52px;
  display: block;
}
.content_login .top {
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #000000;
}
.content_login .top span:last-child {
  font-size: 14px;
  color: #5677fc;
  float: right;
}
.content_login .top span:first-child {
  float: left;
}
.content_login {
  width: 18.75rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.input_select input,
.sjh_padding {
  width: 80%;
  display: block;
  float: right;
  border-left: none;
  border-radius: 0 5px 5px 0;
  position: relative;
}
.sjh_padding {
  width: 100%;
}
.input_select select {
  width: 20%;
  display: block;
  float: left;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
  line-height: 2.5rem;
  height: 2.65rem;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  border-right: none;
  padding-left: 5px;
  border-radius: 5px 0 0 5px;
  background: transparent;
  z-index: 2;
}
.input_select {
  position: relative;
}
.sjh_padding::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 22%;
  transform: translateY(-50%);
  width: 1px;
  height: 45%;
  top: 50%;
  background: #c2cfe0;
  z-index: 9;
}
input {
  border: 1px solid #c2cfe0;
  line-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 5px;

  width: 100%;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
}
button {
  width: 100%;
  line-height: 2.5rem;
  background: #5677fc;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid #5677fc;
  border-radius: 5px;
}
button:hover {
  background: #fff;
  color: #5677fc;
}
.forgot {
  font-size: 0.875rem;
  line-height: 3.75rem;
  color: #5677fc;
  cursor: pointer;
}
.forgot .fr {
  color: #686868;
}
.forgot .fr span {
  color: #5677fc;
}
.other_login > div:nth-child(1) span {
  position: relative;
  background: #fff;
  position: relative;
  z-index: 10;
}
.other_login > div:nth-child(1) {
  background: #fff;
  text-align: center;

  font-size: 0.875rem;
  line-height: 2.5rem;
  color: #686868;
  position: relative;
  text-align: center;
}
.other_login > div:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #c2cfe0;
  left: 0;
  z-index: 9;
}
.wechat div {
  width: 2rem;
  height: 2rem;

  border-radius: 50%;
  line-height: 2rem;
  margin: 0 auto;
  border: 1px solid #c2cfe0;
}
.yzm {
  position: absolute;
  top: 0%;
  background: transparent;
  border: none;
  right: 0;
  width: 30%;
  font-size: 0.75rem;
  text-align: center;
  color: #545556;
  cursor: pointer;
  line-height: 38px !important;
  height: 40px !important;
  font-weight: normal;
}
.yzm:hover {
  background: transparent;
}
.yzm::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: 45%;
  background: #c2cfe0;
  width: 1px;
}
.content_login .top {
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #000000;
  margin-bottom: 0.625rem;
}
.zhmmdl {
  color: #4285f4 !important;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
<style>
.sjh_padding input {
  height: 42px;
  border: none;
  border: 1px solid #c2cfe0;
  line-height: 2.5rem;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.padding_left_27 input {
  padding: 0 1rem 0 25%;
}
.sjh_padding .el-input__suffix {
  right: 34% !important;
}
.yzm_padding .el-input__suffix {
  right: 34% !important;
}
</style>
<style>

.sjh_sjh .el-input__suffix {
  right: 5px !important;
}
@media (max-width: 990px) {
  .login .right,
  .login .left {
    width: 100% !important;
  }
  .login .left {
    background: #f5f5f5;
  }
  .login .right {
    display: none;
  }
}
@media (max-width: 500px) {
  .login .left {
    padding: 20px !important;
  }
  .content_login {
    width: 80% !important;
  }
}
</style>
